<template>
	<view class="reason-container">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="提交意见" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="reason-box" v-for="(it,ix) in content" :key="ix">
			<view class="title display-flex just-between">
				修改意见 {{ix+1}}
				<image :src="'/images/delicon.png' | formatImgUrl" mode="aspectFit" style="width: 40rpx;height: 40rpx;" @tap="del(ix)"></image>
			</view>
			<input type="text" placeholder="请输入" class="desc" v-model="it.title">
			<view class="title">
				相关截图 <text>{{it.images.length}}/3</text>
			</view>
			<view class="imgs display-flex">
				<!-- <view v-for="(img,index) in it.images" class="imgList">
					<image :src="img | formatImgUrl" mode="aspectFill" style="width: 200rpx;height: 200rpx;"></image>
					<view class="imgClose" @click.stop="deletePic(index,ix)">×</view>
				</view>
				<image :src="'/images/up.png' | formatImgUrl" mode="widthFix" 
					@click="onChooseImg(ix)" v-if="it.images.length < 3" style="width: 200rpx;height: 200rpx;"></image> -->
					
				<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="3" width="100" height="100" :action="uploadImgUrl" :fileList="it.images" @afterRead='afterRead' @delete="deletePic($event,ix)">
				</u-upload>
			</view>
		</view>
		<view class="add-line display-flex just-between" @tap="onAdd">
			<text>增加修改</text>
			<image :src="'/images/adda.png' | formatImgUrl" mode="aspectFit"></image>
		</view>
		
		<view class="subbox" @tap="onSubmit">
			提交
		</view>
		
		<view class="xuzhi">
			提交须知:<br>
			1、提交修改后，您的修改意见将展示给写手，在写手上传修改稿件前，无法再次提交修改，因此请尽量一次性提出完整修改意见，积极与写手沟通修改细节。<br>
			2、提交修改后，仍可以选择直接完成订单。在写手上传修改稿件前，可查看未修改稿件、查看修改意见。<br>
			3、写手上传修改稿件后，您将无法查看此前稿件，且三天内未对订单有任何操作，将自动完成该订单。如仍需修改，请再次提交修改意见。<br>
			4、为保护自身与写手双方权益，需要修改稿件时，请使用平台提交意见。所有订单流程外的私下改稿，平台无法记录，因此如发生争议，以订单内记录为准。<br>
			5、稿件经修改定稿后，您对最终定稿的稿件拥有与写手约定的相关权利，对其他相关文字内容（定稿前其他版本内容）的权利，请自行与写手商议决定。<br>
			6、当订单发生争议，可向写手提交部分或全部退款申请，由写手选择是否退款及退款方式。如无法协商解决，可到【我的】-【订单查询】选择该订单，在【更多操作】进行订单申诉。<br>
			7、请阅读并同意<text @click.stop="goToxie">《平台约文服务协议及指南》</text>。
		</view>
	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	export default {
		data(){
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				content: [{
					title: '',
					images: [],
					param_images: []
				}],
				oid: ''
			}
		},
		onLoad(e) {
			this.oid = e.oid
			
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		methods:{
			// 删除
			del(index){
				this.content.splice(index,1)
			},
			// 提交 修改意见
			onSubmit(){
				let isTip = false
				for(let i in this.content){
					if(!this.content[i].title){
						isTip = true
					}
				}
				
				if(isTip){
					this.$common.errorToShow('请填写完整')
					return
				}
				
				let imgs = this.content
				let formImg = []
				for(let i in imgs){
					let item = imgs[i]
					item.images = item.param_images
				}
				this.content = imgs
				
				this.$api.default.request('order/orderCvEdit', {
					oid: this.oid,
					content: this.content
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg,()=>{
							uni.navigateBack({delta:2})
						})
					}
				})
			},
			// 增加修改
			onAdd(){
				this.content.push({
					title: '',
					images: [],
					param_images: []
				})
			},
			// 删除图片
			deletePic(index,ix) {
				console.log(index,ix);
				this.content[ix].images.splice(index, 1)
				this.content[ix].param_images.splice(index, 1)
			},
			async onChooseImg(ix) {
				let auth = db.get('auth');
				console.log(auth, 777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
			
				await this.$common.chooseImage({}, (data) => {
					if (data) {
						this.content[ix].images.push(data)	
					}
				}, 9)
			
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = 0
				
				for(let i in this.content){
					fileListLen += this.content[i].images.length
				}
				
				lists.map((item) => {
					for(let i in this.content){
						this.content[i].images.push({
							...item,
							status: 'uploading',
							message: '上传中'
						})
					}
					
				})
				for (let i = 0; i < lists.length; i++) {
					// let result = await this.uploadFilePromise(lists[i].url,i)
					
					for(let j in this.content){
						let result = await this.uploadFilePromise(lists[i].url,j)
						
						let item = this.content[j].images[fileListLen]
						this.content[j].images.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					}
				}
			},
			uploadFilePromise(url,index) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.content[index].param_images.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}
	
	.reason-container{
		padding-bottom: calc(var(--window-bottom) + 50px);
	}
	
	.reason-box{
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 10px;
		
		.title{
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
			margin-bottom: 10px;
			
			text{
				font-size: 12px;
				color: #999999;
				margin-left: 12rpx;
			}
		}
		
		.desc{
			margin-bottom: 10px;
			padding-bottom: 10px;
			font-family: '思源黑体';
			font-size: 12px;
			color: #999999;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
		}
		
		.imgs{
			flex-wrap: wrap;
			
			.imgList:nth-child(3n) {
				margin-right: 0;
			}
			
			.imgList {
				position: relative;
				padding-bottom: 10rpx;
				margin-right: 31rpx;
			
				.imgClose {
					position: absolute;
					top: -8px;
					right: -8px;
					z-index: 1;
					width: 36rpx;
					height: 36rpx;
					background-color: #45C4B0;
					color: #fff;
					line-height: 36rpx;
					text-align: center;
					border-radius: 100px;
				}
			}
		}
	}
	
	.xuzhi {
		padding: 30rpx 60rpx;
		font-size: 20rpx;
		font-weight: normal;
		line-height: 30rpx;
		color: #999999;
	}
	
	.dibu{
		position: fixed;
		left: 0;
		background-color: #ffffff;
		bottom: 0;
		width: 100%;
		// height: 100rpx;
		border-top: 1px solid rgba(153, 153, 153, 0.1);
		// display: flex;
		// align-items: center;
		// justify-content: center;
		.dili{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 330rpx;
			height: 60rpx;
			border-radius: 4px;
			box-sizing: border-box;
			border: 1px solid #3D3D3D;
			margin: 0 15rpx;
		}
		.dipic{
			width: 32rpx;
			height: 32rpx;
		}
		.fatxt{
			font-size: 24rpx;
			font-weight: normal;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-left: 8rpx;
		}
		.quetxt{
			font-size: 24rpx;
			font-weight: normal;
			letter-spacing: 0em;
			font-weight: bold;
			color: #ffffff;
			padding-left: 8rpx;
		}
		.dilv{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 330rpx;
			height: 60rpx;
			border-radius: 4px;
			border: 1px solid #45C4B0;
			background: #45C4B0;
			margin: 0 15rpx;
		}
	}
	
	.subbox {
		width: 630rpx;
		height: 86rpx;
		border-radius: 8px;
		opacity: 1;
		background: #45C4B0;
		text-align: center;
		margin: 0 auto;
		line-height: 86rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
	
	.add-line{
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-family: '思源黑体';
		font-size: 14px;
		font-weight: bold;
		color: #3D3D3D;
		
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>